//@flow
/**
 * tab导航栏
 */
import React, { Component } from 'react';
import { 
    View,
    Text,
    Image,
 } from 'react-native';
import { createBottomTabNavigator } from "react-navigation";
import { BottomTabBar } from '../../container/bottomTabBar';
//测试ipad，竖状tabbar
import { SideTabBarIPad } from "../../container/sideTabBarIpad";
import * as ui from "../../util/constant/ui";
import { Tabs as TabRoutes } from "./tabs";
/**读取tab配置文件，转为tab参数 */
const TabWrapper = (tabRoutes:TabItemProps[]):Object => {
    let map :NavigationRouteConfigMap  = {};
    for(let tab of tabRoutes){
        map[tab.name] = {
            screen	:tab.screen,
            navigationOptions:{
                title:tab.title,
                tabBarIcon:({focused})=>{
                    return focused ? tab.selectedIcon : tab.normalIcon
                }
            }
        }
    }
    return map
}

export const TabNavigator = createBottomTabNavigator(
    TabWrapper(TabRoutes)
    ,{
    tabBarComponent:BottomTabBar,
    tabBarOptions:{
        activeTintColor:ui.TAB_ITEM_TEXT_TINT_COLOR_SELECTED,//图标选中激活的颜色
        activeBackgroundColor:ui.TAB_BAR_BG_COLOR,//图标选中背景色
        inactiveTintColor:ui.TAB_ITEM_TEXT_TINI_COLOR_NORMAL,//图标未选中情况下的颜色
        inactiveBackgroundColor:ui.TAB_BAR_BG_COLOR,//图标未选中背景颜色
        showLabel:true,//是否显示文字，自定义则跟他没关系了
        showIcon:true,//是否显示图标，自定义无关
        style:{
            backgroundColor:ui.TAB_BAR_BG_COLOR,
        },//标签栏的样式，可以设置高度什么的
        labelStyle:{},//图标文字的样式
        tabStyle:{},//选项卡的样式
        allowFontScaling:true,//图标字体大小
    },//tabbarOptions的所有值会作为prop传给BottomTabBar，一定要编辑，写完整
    initialRouteName:'home',//tab第一屏幕显示的画面,此处的routeName必须是tab内的
    //order:['Home'],//可以简单的为tab决定排序，此处的routeName必须是tab内的
    backBehavior:null,//安卓设备点击返回按钮事件
    
})
